<template>
  <div class="subMenu">
  
    <div v-for="item in sideMenu" :key="item.meta.name">
      <!--是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转-->
      
      


      <!-- 具有子菜单的是el-submenu -->
      <el-submenu index="1" 
                  v-if="item.children&&item.children.length>0">
        <template slot="title">
        <i :class="item.meta.icon" style="margin-right:10px; font-size:20px"></i>
        <span slot="title" >{{item.meta.name}}</span>
        </template>
        <el-menu-item-group>
            <!-- 子组件插入，使用递归创建菜单 -->
            <sub-menu :sideMenu="item.children"></sub-menu>
        </el-menu-item-group>
      </el-submenu>

      <!-- 如果使用v-else，要放在v-if下面执行，不然会报错 -->
      <!-- 设置唯一标志index，才可以实现选中高亮 -->
      <el-menu-item v-else        
                           
                    :index="item.meta.fullPath" 
                    @click="jumpRoute(item.name)">                  
        <i :class="item.meta.icon" style="margin-right:10px; font-size:20px"></i>
        <span slot="title">{{item.meta.name}}</span>
      </el-menu-item>
      <!-- <el-menu-item index="/Mine" >
        <i class="el-icon-bell"></i>
        <span slot="title">考勤管理</span>
      </el-menu-item>
      
      <el-menu-item index="4">
        <i class="el-icon-s-custom"></i>
        <span slot="title">我的中心</span>
      </el-menu-item>
      <el-menu-item index="5">
        <i class="el-icon-setting"></i>
        <span slot="title">数据统计</span>
      </el-menu-item> -->
    </div>
  </div>
</template>

<script>
  export default {
  name:"sub-menu" , //给组件取名字之后，方便递归
  props:{
    sideMenu:{
      type:Array,
      default:[]
    }
  },
    data() {
      return {
        isCollapse: false  //是否收起
      };
    },
    
  methods: {
    jumpRoute(name){
      this.$router.push({ name })
    }
  }
  };
</script>

<style scoped>

  
  
  
</style>